﻿<div>

<script type="text/javascript">
    $(function () {
        $("#t1").datagrid({
            title: 'test datagrid',
            width: 1200,
            height: 400,
            method: "get",
            url: "datagrid/datagrid-data.json",
            idField: 'ID',
            remoteSort: false,
            frozenColumns: [[
                { field: 'ck', checkbox: true },
                { field: 'ID', title: 'ID', width: 80, sortable: true }
            ]],
            columns: [[
                { field: 'Code', title: '编号(Code)', width: 120, sortable: true },
                { field: 'Name', title: '名称(Name)', width: 140, sortable: true },
                { field: 'Age', title: '年龄(Age)', width: 120, sortable: true },
                { field: 'Height', title: '身高(Height)', width: 140, sortable: true },
                { field: 'Weight', title: '体重(Weight)', width: 140, sortable: true },
                { field: 'CreateDate', title: '创建日期(CreateDate)', width: 180, sortable: true },
                { field: 'undefined', title: '测试(不存在的字段)', width: 150 }
            ]],
            rowContextMenu: [
                { text: "查看数据", iconCls: "icon-hamburg-zoom", disabled: false, handler: function (e, index, row) { $.easyui.showOption(row); } },
                { text: "测试菜单1", iconCls: "icon-hamburg-address", disabled: false, handler: function () { alert(1); } },
                { text: "测试菜单2", iconCls: "icon-hamburg-busy", disabled: false, handler: function (e, index, row) { alert($.string.format("您点击了{0}", row.Name)); } }
            ],
            enableHeaderClickMenu: false,
            enableHeaderContextMenu: false,
            enableRowContextMenu: true,         //此属性开启表头列名称右键点击菜单
            pagingMenu: { submenu: false },      //开启行右键菜单的翻页功能，此属性可丰富配置，详情见 API 文档
            moveMenu: true,                     //开始行右键菜单的移动列功能，此属性可丰富配置，详情见 API 文档
            autoBindDblClickRow: true,          //此属性开启设置将第一个自定的右键菜单事件自动绑定为双击行事件，并且使第一个右键自定菜单文字加粗显示；此属性默认值为 true
            rowTooltip: function () { return "双击显示行数据详情"; }
        });
    });
</script>

<h2>jEasyUI DataGrid Extensions - 行右键自定义菜单事件自动绑定为行双击事件</h2>
<p>该部分扩展由文件 jeasyui.extensions.datagrid.js 实现。</p>
<hr />
<p>
    用鼠标右键点击此表格的数据行试试看；另外，您也可以双击行数据试试；<br />
    你会发现右键菜单中第一个自定义的菜单项文字加粗显示，另外第一个自定义右键菜单中的事件会在双击行时自动触发；
</p>
<table id="t1"></table>

</div>